<template>
	<view class="layout">
		<!-- 引入组件 -->
		<public-nav-search isBack="true" @get-key="getkeyword"></public-nav-search>
		<!-- 搜索记录标题 -->
		<view class="search-title" v-if="searchHistory.length">
			<!-- 文字 -->
			<view class="title-zi">搜索记录</view>
			<!-- 图标 -->
			<u-icon name="trash" color="#8f8f8f" width="28rpx" height="28rpx" @click="removehistory"></u-icon>
		</view>
		
		<!-- 搜索历史 -->
		
		<view class="search-history" v-if="searchHistory.length">
			<!-- 搜索 -->
			<view class="tab" v-for="(item, index) in searchHistory" :key="item.index" @click="clickTab(item)">{{ item }}</view>
		</view>
		
		
		<!-- 推荐 -->
		<view class="recommon">推荐</view>
		
		<!-- 推荐的 -->
		<view class="goods-list">
			<!-- 单独一个 -->
			<view class="goods-img-box" v-for="item in fordian[0]">
				<view class="goods-img">
					<image src="../../static/bg1.png" mode=""></image>
				</view>
				<view v-show="item.is_hot? true : false" class="goods-icon">
					<!-- 热卖 -->
					<view class="goods-hot">{{ item.title }}</view>
				</view>
				<view class="goods-title">
					商品名字
				</view>
				<view class="goods-li">
					<view class="goods-price">Y{{ item.price }}</view>
					<view class="goods-sold">已卖{{ item.sold }}</view>
				</view>
				<view class="goods-address">
					<view class="goods-type" v-show="item.type_offical===1 ? true:false ">官方</view>
					<view class="goods-typeone" v-show="item.type_offical===2 ? true: false ">门店自营</view>
					<view class="goods-ad">{{ item.content }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
	
	const searchHistory = ref(uni.getStorageSync("searchHistory") || [])
	
	function getkeyword(e){
		console.log("父组件", e)
		
		searchHistory.value =  [ ...new Set([ e, ...searchHistory.value ]) ]
		uni.setStorageSync("searchHistory", searchHistory.value)
	}
	
	// 清除缓存
	function removehistory(){
		// console.log("dianl1")
		uni.showModal({
			title:"确认删除搜索历史？",
			success:res=>{
				if(res.confirm){
					console.log("点击了删除")
					uni.removeStorageSync("searchHistory")
					searchHistory.value = []
				}
			}
		})
	}
	
	
	// 点击历史记录
	function clickTab(item){
		console.log("点击的item",item)
		getkeyword(item)
	}
	
	// 推荐ref
	const fordian = ref([
			[{
					title: '热卖',
					content: '执行食物疑难问题',
					price: 22,
					sold: 123,
					type_offical:2,
					is_hot:true
				},
				{
					title: '热卖',
					content: '杭州食物疑难问题',
					price: 22,
					sold: 123,
					type_offical:3,
					is_hot:false
				},
				{
					title: '热卖',
					content: '执行食物疑难问题',
					price: 22,
					sold: 123,
					type_offical:1,
					is_hot:false
				},
				{
					title: '热卖',
					content: '执行食问题',
					price: 22,
					sold: 123,
					type_offical:2,
					is_hot:false
				}
			]
		])
	
</script>

<style scoped lang="scss">
	.layout {
		.search-title {
			width: 702rpx;
			height: 84rpx;
			// border: 1px solid red;
			margin: 8rpx 24rpx 0 24rpx;
		
			display: flex;
			.title-zi {
				width: 112rpx;
				height: 44rpx;
				// border: 1px solid red;
				font-size: 25rpx;
				line-height: 44rpx;
				font-weight: 600;
				margin: 20rpx 0;
			}
			u-icon {
				margin: 25rpx 2rpx 28rpx 560rpx;
				// border: 1px solid red;
			}
		}
		
		
		// 搜索历史
		.search-history {
			width: 702rpx;
			height: 136rpx;
			// border: 1px solid red;	
			overflow: scroll;
			margin: 0 24rpx 8rpx 24rpx;
			
			.tab {
				border: 2rpx solid #ababab;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 20rpx;
				display: inline-block;
				font-size: 28rpx;
				margin: 0 24rpx 12rpx 0;
			}
		}
		.recommon {
			width: 702rpx;
			height: 44rpx;
			font-size: 28rpx;
			font-weight: 500;
			margin: 20rpx 24rpx;
		}
		
		// 推荐列表
		.goods-list {
			width: 702rpx;
			height: 832rpx;
			// border: 1px solid red;
			margin: 24rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-gap: 24rpx;
		
			// border: 1px solid red;
		
			.goods-img-box {
				position: relative;
				width: 339rpx;
				height: 362rpx;
				background: #ffffff;
		
				.goods-img {
					width: 339rpx;
					height: 198rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
		
				.goods-icon {
					position: absolute;
					top: 0;
					right: 0;
					background-color: #ef0a19;
					width: 72rpx;
					height: 48rpx;
					border-bottom-left-radius: 20rpx;
					border-top-right-radius: 10rpx;
					line-height: 48rpx;
					color: #efefef;
		
					.goods-hot {
						width: 48rpx;
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						font-weight: 350;
						// border: 1px solid white;
						margin: 8rpx 12rpx;
					}
				}
		
				.goods-title {
					width: 307rpx;
					height: 44rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					font-weight: 500;
					margin: 8rpx 16rpx;
					// border: 1px solid red;
				}
		
				.goods-li {
					display: flex;
					width: 307rpx;
					// border: 1px solid red;
					margin: 0 16rpx;
		
					.goods-price {
						width: 146rpx;
						height: 44rpx;
						color: #ef0a19;
						font-weight: 600;
					}
		
					.goods-sold {
						width: 108rpx;
						height: 44rpx;
						line-height: 44rpx;
						color: #cccccc;
						font-size: 24rpx;
						margin-left: 55rpx;
					}
				}
		
				.goods-address {
					width: 307rpx;
					height: 36rpx;
					line-height: 36rpx;
					// border: 1px solid red;
					margin: 8rpx 16rpx;
					display: flex;
		
					.goods-type {
						width: 44rpx;
						height: 22rpx;
						font-size: 22rpx;
						line-height: 22rpx;
						// border: 1px solid #ef0a19;
						border-radius: 3rpx;
						background: #EBC980;
						margin: 5rpx 8rpx 5rpx 0;
						padding: 2rpx 4rpx;
					}
		
					// 第二种门店
					.goods-typeone {
						width: 88rpx;
						height: 22rpx;
						line-height: 22rpx;
						background: #000000;
						color: #ffffff;
						margin: 7rpx 8rpx 7rpx 0;
						font-size: 22rpx;
						font-weight: 400;
						padding: 2rpx 4rpx;
						border-radius: 4rpx;
					}
		
					.goods-ad {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
